import { messages } from 'share/common';
import React, { Component } from 'react';
import { Tabs } from 'antd';
import ScanSendData from './scan-send-input';
import ScanSendDelivery from './scan-send-delivery';

const { TabPane } = Tabs;

class ScanSendOption extends Component {

  state = {
    tabs: [
      {
        key: 'direct-send',
        tab: messages('expense-13.key28')/*直接寄单*/,
      }, {
        key: 'delivery-send',
        tab: messages('expense-13.key29')/*快递单寄单*/
      }
    ]
  };

  handleOnChange = (sendData) => {
    this.props.onChange(sendData);
  };

  render() {
    const { tabs } = this.state;
    const { sendData } = this.props;
    return (
      <section className="scan-send-option-detail">
        <div className="scan-send-option-detail-title">
          <h2>
            {messages('expense-13.key30')/*扫码寄单*/}
          </h2>
        </div>
        <Tabs animated={false}>
          {tabs.map(item => React.createElement(TabPane, item, item.key === 'direct-send'
            ? <ScanSendData sendData={sendData} onChange={this.handleOnChange}/>
            : <ScanSendDelivery sendData={sendData} symbol={item.key} onChange={this.handleOnChange}/>
            )
          )
          }
        </Tabs>
      </section>
    );
  }
}

ScanSendOption.propTypes = {
  onChange: React.PropTypes.func
};

export default ScanSendOption;
